<template>
    <div class="login">
        <el-dialog v-model="userStore.visible" @close="close">
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <div class="phone" v-show="flag === true">
                        <h1>手机号登录</h1>
                        <el-form ref="loginForms" :inline="false" :rules="loginRules" :model="loginForm">
                            <el-form-item prop="phone">
                                <el-input v-model="loginForm.phone" :prefix-icon="User"
                                    placeholder="请输入手机号码"></el-input>
                            </el-form-item>
                            <el-form-item prop="code">
                                <el-input v-model="loginForm.code" :prefix-icon="Lock" placeholder="请输入验证码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="getCode" style="width: 100%;" :disabled="!isPhone || countdown">
                                    <span v-if="!countdown">获取验证码</span>
                                    <CountDown @getCountdown="getCountdown" v-else :countdown="countdown" />
                                </el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button style="width: 100%;" type="primary" @click="login">登录</el-button>
                            </el-form-item>
                        </el-form>
                        <div class="bottom" @click="changeFlag">
                            <p>微信扫码登录</p>
                            <svg t="1733212139498" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2387" width="16" height="16">
                                <path
                                    d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                                    fill="#28C445" p-id="2388"></path>
                                <path
                                    d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                                    fill="#28C445" p-id="2389"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="code" v-show="flag === false">
                        <div id="login_container">
                        </div>
                        <div class="goPhone" @click="flag = true">
                            <p>手机验证码登录</p>
                            <svg t="1733217664754" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="16050" width="16" height="16">
                                <path
                                    d="M512 0c282.7776 0 512 229.2224 512 512s-229.2224 512-512 512S0 794.7776 0 512 229.2224 0 512 0z m131.584 256H380.416c-26.2656 0-47.616 20.736-47.616 46.336v419.328c0 25.6256 21.2992 46.336 47.616 46.336h263.168c26.2656 0 47.616-20.736 47.616-46.336V302.336c0-25.6256-21.2992-46.336-47.616-46.336zM512 691.2a25.6 25.6 0 1 1 0 51.2 25.6 25.6 0 0 1 0-51.2z m131.4048-384v358.4H380.5952V307.2h262.8096z m-23.8848 25.6h-215.04v307.2h215.04V332.8z"
                                    fill="#48B57C" p-id="16051"></path>
                            </svg>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12" :offset="0">
                    <div class="right">
                        <div class="top">
                            <div class="weix">
                                <img src="../../assets/images/code_app.png" alt="">
                                <svg t="1733214566488" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2595" width="16" height="16">
                                    <path
                                        d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"
                                        fill="#5D5D5D" p-id="2596"></path>
                                </svg>
                                <p>微信扫一扫关注</p>
                                <p>"快速预约挂号"</p>
                            </div>
                            <div class="weix">
                                <img src="../../assets/images/code_login_wechat.png" alt="">
                                <svg t="1733215377091" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="3790" width="16" height="16">
                                    <path
                                        d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                                        p-id="3791"></path>
                                </svg>
                                <p>扫一扫下载</p>
                                <p>"预约挂号"APP</p>
                            </div>
                        </div>
                        <div class="behind">
                            <p>xxxxxx官方指定平台</p>
                            <p>快速挂号 安全放心</p>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { getCodeAPI } from '@/api/hospital';
import useUserStore from '@/store/modules/user';
import { Lock, User } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { computed, reactive, ref, watch } from 'vue';
import CountDown from '@/components/countdown/index.vue'
import { getWechatLogin } from '@/api/user';
import { useRoute, useRouter } from 'vue-router';

let userStore = useUserStore()
let flag = ref<boolean>(true)
let countdown = ref<boolean>(false)

let loginForm = reactive({
    phone: '17720125002',
    code: ''
})
let loginForms = ref()
let isPhone = computed(() => {
    //手机号码正则表达式
    const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
    //返回布尔值:真代表手机号码、假代表的即为不是手机号码
    return reg.test(loginForm.phone);
})
//自定义校验规则:手机号码自定义校验规则
const validatorPhone = (rule: any, value: any, callBack: any) => {
    //rule:即为表单校验规则对象
    //value:即为当前文本的内容
    //callBack:回调函数
    const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
    if (reg.test(value)) {
        callBack();
    } else {
        callBack(new Error("请输入正确的手机号码"));
    }
};
//验证码自定义校验规则
const validatorCode = (rule: any, value: any, callBack: any) => {
    //rule:即为表单校验规则对象
    //value:即为当前文本的内容
    //callBack:回调函数
    if (/^\d{6}$/.test(value)) {
        callBack();
    } else {
        callBack(new Error("请输入正确的验证码"));
    }
};
//表单校验的规则对象
const loginRules = {
    //手机号码校验规则
    //required:代表当前字段务必进行校验
    //message:代表的校验错误的提示信息
    //trigger:代表表单校验触发的时机  change:文本发生变化的时候进行校验  blur:失却焦点的时候触发校验
    //min:代表的是最小位数
    //max:代表的是最大的位置
    // phone: [{ required: true, message: "手机号码务必11位", trigger: "change", min: 11 }],
    // code: [{ required: true, message: "验证码务必6位", trigger: "blur", min: 6 }],

    phone: [{ trigger: "change", validator: validatorPhone }],
    code: [{ trigger: "change", validator: validatorCode }],
};
const getCode = async () => {
    countdown.value = true
    let res: any = await getCodeAPI(loginForm.phone)
    if (res.code == 200) {
        loginForm.code = res.data
        return 'ok'
    } else {
        ElMessage({
            type: 'error',
            message: "获取验证码失败"
        })
        return Promise.reject(new Error(res.message))
    }
}
const getCountdown = (countdowns: boolean) => {
    countdown.value = countdowns
}
let $route = useRoute()
let $router = useRouter()
const login = async () => {
    //保证表单中各输入部件都校验通过再发请求
    await loginForms.value.validate()
    // 当表单中有输入部件校验不通过时，浏览器控制台有Promise报错日志，这是正常的。
    try {
        await userStore.login(loginForm)
        userStore.visible = false
        if ($route.query.redirect) {
            $router.push({ path: $route.query.redirect as string })
        }
        ElMessage({
            type: 'success',
            message: '登录成功'
        })
    } catch (error) {
        ElMessage({
            type: 'error',
            message: (error as Error).message
        })
    }
}
const close = () => {
    Object.assign(loginForm, {
        phone: '',
        code: ''
    })
    loginForms.value.resetFields()
}

const changeFlag = async () => {
    flag.value = false
    const wxRedirectUri = encodeURIComponent(window.location.origin + "/wxlogin")
    await getWechatLogin(wxRedirectUri).then(res => {
        const { appid, redirectUri, state } = res.data
        // @ts-ignore
        new WxLogin({
            self_redirect: true,
            id: "login_container",
            appid: appid,
            scope: "snsapi_login",
            redirect_uri: redirectUri,
            state: state,
            style: "black",
            href: ""
        });
    })
}
watch(() => flag.value, () => {
    if (flag.value === false) {
        userStore.changeVisible()
    }
})
</script>

<style scoped lang="scss">
.login {
    position: fixed;
    top: 50%;
    right: 50%;
    z-index: 100;
    text-align: center;

    ::v-deep .el-dialog {
        padding: 0px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        width: 850px;
        height: 560px;
        background-color: #f7fbff;
        background-image: url();
        background-repeat: repeat;
        border-radius: 4px;
    }

    ::v-deep .el-dialog__header {
        background-color: #e8f2ff;
        padding: 20px 30px;
        border-radius: 4px 4px 0 0;
    }

    ::v-deep(.el-dialog__body) {
        padding: 0 40px 20px 40px;
    }

    ::v-deep .el-form-item {
        margin-bottom: 30px;
    }

    ::v-deep .el-input {
        --el-input-height: 50px;
    }

    ::v-deep .el-button {
        height: 43px;
    }

    .phone {
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
        padding: 20px;

        h1 {
            font-weight: bold;
            margin-bottom: 20px;
            font-size: 15px;
        }

        .bottom {
            margin-top: 100px;
            cursor: pointer;

            p {
                margin: 10px 0;
            }
        }
    }

    .right {
        margin-top: 30px;

        .top {
            display: flex;
            justify-content: space-between;

            .weix {
                display: flex;
                flex-direction: column;
                align-items: center;

                img {
                    width: 75%;
                    margin: 10px 0 25px 0;
                }

                p {
                    margin-top: 6px;
                    font-size: 12px;
                }
            }
        }

        .behind {
            margin-top: 20%;
            font-size: 15px;

            p {
                margin-top: 20px;
            }
        }
    }

    .code {
        background-color: #fff;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .3);

        .goPhone {
            cursor: pointer;

            p {
                margin: 10px 0;

            }
        }
    }
}
</style>